<template>
  <div class="info-wrap">
    <Title title="更多上刊信息" style="font-size:16px; margin:32px 0 8px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <!-- 固定字段 -->
        <el-col v-for="field in noConfirmFields" :span="8" :key="field.keyword" :class="{'label-collapse-global': field.labelCollapse && !field.noDetailCollapse}">
          <el-form-item :label="`${field.label}：`" style="margin-bottom: 0px;">
            <ToolTip
              v-if="field.type === 'number'"
              :content="getData(field) | numberTextFormat(2)"
              :tool-tip="getData(field) | moneyFilter" />
            <ToolTip v-else :content="getData(field)" />
          </el-form-item>
        </el-col>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(detailInfo.moreJournalKey.dynamicKey)" :span="8" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="field in confirmFields" :key="field.keyword" :gutter="20" style="margin-top: 4px">
        <el-col v-for="child in field.children" :span="8" :key="child.keyword">
          <div v-if="child.type==='switch'" class="flex-center checkbox-class">
            <el-checkbox
              v-model="detailInfo[field.parentKey][field.keyword][child.keyword]"
              disabled
            />
            <span class="label">{{ child.label }}</span>
          </div>
          <template v-else>
            <el-form-item :label="`${child.label}：`" style="margin-bottom: 0px;">
              <ToolTip
                v-if="child.type === 'number'"
                :content="getConfirmData(field, child) | numberTextFormat(2)"
                :tool-tip="getConfirmData(field, child) | moneyFilter" />
              <ToolTip v-else :content="getConfirmData(field, child)" />
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { moreJournalFields } from '@/views/resource/create/resourceData';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import mixins from './mixins';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    fields() {
      // platformCategory，1:微信 2: 微博 3:小红书 4.抖音 5:更多  6:直播 7:B站
      return moreJournalFields.filter(i => {
        return !i.platformCategory && !i.platform || i.platformCategory && i.platformCategory.includes(this.detailInfo.platformCategory) || i.platform && i.platform.includes(this.detailInfo.platformTypeName);
      });
    },
    noConfirmFields() {
      const fields = this.fields || [];
      return fields.filter(i => {
        return i.type !== 'confirm';
      });
    },
    confirmFields() {
      const fields = this.fields || [];
      return fields.filter(i => {
        return i.type === 'confirm';
      });
    }
  },
  methods: {
    getData(field) {
      const value = this.detailInfo[field.parentKey] ? this.detailInfo[field.parentKey][field.keyword] : '';
      return field.filterFn ? field.filterFn(value) : value;
    },
    getConfirmData(field, child) {
      if (!this.detailInfo[field.parentKey][field.keyword]) return '';
      const parentValue = this.detailInfo[field.parentKey][field.keyword];
      const value = parentValue[child.keyword];
      return field.filterFn ? field.filterFn(value) : value;
    }
  }
};
</script>
<style lang="scss">
.checkbox-class {
  height: 32px;
  margin:0 0 12px 0px;
  font-size: 14px;
  color: #333;
  .label {
    margin-left: 12px;
  }
}
</style>
